<div id="main">
  <div class="container">
    <h1>URLs that you are tracking</h1>
    <div class="buttons">
      <div class="float-right">
        <button class="btn btn-info ml-2" @click="open('add')">Add new link</button>

      </div>
      <div class="col-sm-6">
        <label for="search"><b>Search description:</b></label>
        <input class="form-control" v-model="search" id="search" name="search" type="text" autocomplete="off">
      </div>
      <br>
      <br>
    </div>

    <p></p>

    <table class="table">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Description</th>
          <th scope="col">URL</th>
          <th scope="col">Fetch Every</th>
          <th scope="col">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(target,index) in filteredTargetsList" :index="index"
          v-bind:style="[target.status === 'changed' ? {'background-color':'#FF6666'} : {'background-color':'#fff'}]">
          <th scope="row">{{index}}</th>
          <td>{{target.description}}</td>
          <td><a v-bind:href="target.link">{{target.link}}</a></td>
          <td>{{target.fetchEvery}}</td>
          <td>
            <button type="button" class="btn btn-danger" v-if="target.status === 'unchanged'" @click="removeRow(index)"
              id="deleteButton" :disabled="isDisabled ? true : false">Delete</button>
            <button type="button" class="btn btn-primary" v-else-if="target.status === 'changed'"
              @click="markAsSeen(index)" id="clearButton" :disabled="isDisabled ? true : false">View Changes</button>

          </td>
        </tr>
      </tbody>
    </table>

  </div>

  <router-view></router-view>

  <!--  ╔═╗═╗ ╦╔═╗╔╦╗╔═╗╦  ╔═╗  ┌┬┐┌─┐┌┬┐┌─┐┬
        ║╣ ╔╩╦╝╠═╣║║║╠═╝║  ║╣   ││││ │ ││├─┤│
        ╚═╝╩ ╚═╩ ╩╩ ╩╩  ╩═╝╚═╝  ┴ ┴└─┘─┴┘┴ ┴┴─┘  -->
  <modal class="add-modal" v-if="modal==='add'" @close="close()" v-cloak>
    <div class="modal-header">
      <h2 class="modal-title">Add new target</h2>
      <p>Fill the following form to add new link the the cron job.</p>
      <p>
        <a href="https://github.com/ahussam/url-tracker">Learn how to set these settings</a>
      </p>
      <hr />
    </div>

    <div class="modal-body">
      <ajax-form action="addLink" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedForm()"
        :handle-parsing="handleParsingForm">
        <div class="row">
          <div class="col-sm-8">
            <div class="form-group">
              <label for="email-from">Description</label>
              <input class="form-control" id="description" name="description" type="text"
                :class="[formErrors.description ? 'is-invalid' : '']" v-model.trim="formData.description"
                placeholder="Uber S3 bucket" autocomplete="off">
              <div class="invalid-feedback" v-if="formErrors.description">Please enter a short description.</div>
            </div>
            <div class="form-group">
              <label for="link">Link of page</label>
              <input class="form-control" id="link" name="link" type="url"
                :class="[formErrors.link ? 'is-invalid' : '']" v-model.trim="formData.link"
                placeholder="https://www.mytarget.com/target_us/login.php" autocomplete="off">
              <div class="invalid-feedback" v-if="formErrors.link">Please enter a vaild url .</div>
            </div>
            <div class="form-group">
              <label for="keywords">Keywords</label>
              <input class="form-control" id="keywords" name="keywords" type="text" v-model.trim="formData.keywords"
                placeholder="404 not found, feature, new addon" autocomplete="off">
            </div>
            <div class="form-group">
              <label for="cookie">Cookie</label>
              <input class="form-control" id="cookie" name="cookie" type="text" v-model.trim="formData.cookie"
                placeholder="userid=123; csrf=abc_123" autocomplete="off">
            </div>
          </div>
          <div class="col-sm-3">
            <div class="form-group">
              <label for="fetchEvery">Fetch every</label>
              <select class="form-control" id="fetchEvery" name="fetchEvery" v-model.trim="formData.fetchEvery"
                required>
                <option value="hour">Hour</option>
                <option value="day">Day</option>
                <option value="week">Week</option>
                <option value="month">Month</option>
              </select>
            </div>
            <div class="form-group">
              <label for="acceptedChange">Tolerance</label>
              <input class="form-control" id="acceptedChange" name="acceptedChange" type="text"
                v-model.trim="formData.acceptedChange" placeholder="50" autocomplete="off">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <p class="text-danger" v-if="cloudError">An error occured while processing your request. Please check your
              information and try again.</p>
          </div>
        </div>
        <div class="modal-footer flex-row-reverse justify-content-between">
          <ajax-button type="submit" class="btn btn-info" :syncing="syncing">Add link</ajax-button>
          <button type="button" data-dismiss="modal" class="btn btn-outline-info">Cancel</button>
        </div>
      </ajax-form>
    </div>


  </modal>
  <modal class="diff-modal" v-if="modal==='diff'" @close="close()"  v-cloak>

    <div class="modal-header">
      <h2 class="modal-title">Diff Checker</h2>
      <p>
        <b>Keys</b>
        <br>
        Deleted: <del>this</del>
        <br>
        Added: <ins>this</ins>


      </p>
      <p>
      </p>
      <hr />
    </div>
    <div class="modal-body">
      <pre>
          <code v-html="diff"></code>
        </pre>
    </div>

    <button type="button" data-dismiss="modal" class="btn btn-outline-info">Cancel</button>
  </modal>


</div>

<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>